{% trans_default_domain 'FOSUserBundle' %}

<script type="text/javascript">

    jQuery(document).ready(function($) {
        $('#colorSelector div').css('backgroundColor', '#0f10f0');
        $('#colorSelector').ColorPicker({
            color: '#0000ff',
            onShow: function(colpkr) {
                $(colpkr).fadeIn(500);
                return false;
            },
            onHide: function(colpkr) {
                $(colpkr).fadeOut(500);
                return false;
            },
            onChange: function(hsb, hex, rgb) {
                $('#colorSelector div').css('backgroundColor', '#' + hex);
                $('#colorSelector input').attr('value', hex);
            }
        });
    });

</script>

<hr class="colorgraph">

<form action="{{ path('fos_user_registration_register') }}" {{ form_enctype(form) }} method="POST" class="fos_user_registration_register form-horizontal">
    {# form_widget(form) #}

    <div class="form-group {% if form_errors(form.email) %} has-error {% endif %}">
        {{ form_widget(form.email, {'attr': {'class': 'form-control input-lg', 'placeholder': 'Adresse e-mail'}}) }}
    </div>

    <div class="form-group {% if form_errors(form.username) %} has-error {% endif %}">
        {{ form_widget(form.username, {'attr': {'class': 'form-control input-lg', 'placeholder': 'Nom d\'utilisateur'}}) }}
        
    </div>

    <div class="form-group {% if form_errors(form.plainPassword.first) %} has-error {% endif %}">
        {{ form_widget(form.plainPassword.first, {'attr': {'class': 'form-control input-lg', 'placeholder': 'Mot de passe'}}) }}
    </div>

    
    <div class="form-group {% if form_errors(form.plainPassword.second) %} has-error {% endif %}">
        {{ form_widget(form.plainPassword.second, {'attr': {'class': 'form-control input-lg', 'placeholder': 'Confirmation du mot de passe'}}) }}
        
    </div>

    <div class="form-group {% if form_errors(form.color) %} has-error {% endif %}">
        {{ form_label(form.color, 'Couleur :') }}
        <div id="colorSelector"> {{ form_widget(form.color, {'attr': {'class': 'colorpicker', 'value': '0f10f0'}}) }} <div style="display:block;"></div></div>
    </div>

    {{ form_rest(form) }} 

    <hr class="colorgraph">
    
    <div class="form-group">
        <input type="submit" class="btn btn-lg btn-success btn-block" value="S'inscrire" />
    </div>
</form>